<template>
   <div ww3 auto class="pay-wrapper">
    <el-page-header @back="goBack" content="账户充值"> </el-page-header>
    <div fz-14 class="upload-top">
      <p>在线充值后一秒到账，马上就能使用，余额永久有效，用完为止没有时间限制</p>
      <p>充值即视为消费，可开具发票，不可用于提现</p>
    </div>
    <div class="top-msg">
      <div class="msg-left">
        <span>充值账号：四季豆炒番茄</span>
        <span>充值余额：0元</span>
        <span>销售收入：0元</span>
        <!-- <span>V币：1</span> -->
      </div>
      <div class="msg-right" @click="jumpToList">订单和发票</div>
    </div>
    <div class="pay">
      <div class="pay-method">
        <label>选择付款方式</label>
        <div class="method-item type1" :class="[active==1?'active1':'']" @click="payMethodsChange(1)"></div>
        <div class="method-item type2" :class="[active==2?'active2':'']" @click="payMethodsChange(2)"></div>
        <div class="method-item type3" :class="[active==3?'active3':'']" @click="payMethodsChange(3)"></div>
        <div class="method-item type4" :class="[active==4?'active4':'']" @click="payMethodsChange(4)"></div>
      </div>
      <div class="pay-content">
        <label>{{calcType(active)}}</label>
        <div v-if="active !== 3" class="money">
          <div class="money-content" @click="wxPay(500)">
            <div class="price-item">
              500元
            </div>
          </div>
          <div class="money-content" @click="wxPay(300)">
            <div class="price-item">
              300元
            </div>
          </div>
          <div class="money-content" @click="wxPay(100)">
            <div class="price-item">
              100元
            </div>
          </div>
          <div class="money-content" @click="wxPay(50)">
            <div class="price-item">
              50元
            </div>
          </div>
          <div class="money-content" @click="wxPay(200)">
            <div class="price-item">
              200元
            </div>
          </div>
          <div class="money-content">
            <el-input placeholder="自定义金额" v-model="customMoney" style="width:222px;height:45px">
              <el-button slot="append" @click="wxPay(0)">确定</el-button>
            </el-input>
          </div>
        </div>
        <div class="dgzz" v-if="active === 3">
          <ul>
            <li>
              <span>户名：</span>
              <span>合肥白羊星文化传媒有限公司</span>
            </li>
            <li>
              <span>税号：</span>
              <span>913401005901813064</span>
            </li>
            <li>
              <span>开户行：</span>
              <span>徽商银行合肥包河支行</span>
            </li>
            <li>
              <span>账号：</span>
              <span>1020901021000527859</span>
            </li>
            <li>
              <span>联行号：</span>
              <span>319361002095</span>
            </li>
            <li>
              <span>汇款备注：</span>
              <span><span style="color: #dc3e93;">uid充值款</span>(1234充值款)</span>
            </li>
            <li>
              <span>请在工作时间汇款，将打款截图发给<span style="cursor: pointer; color: #0eb5e7;">在线客服</span>核对充值</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible"
      :close-on-click-modal ="false"
      width="600px"
      @close="dialogClose"
      center>
      <h3 class="zf-tit">账号充值</h3>
      <div class="zf-wrapper">
        <img :src="payImg" alt="" v-if="active == 2">
        <vue-qr v-if="active == 1" class="vue-qr" :text="zfb" :logoScale="50" :size="260"></vue-qr>
        <div class="zf-text">
          <p class="money-text">充值金额：<span>{{money}}元</span></p>
          <p class="zf-type">
            <img v-if="active == 1" class="zf-type-icon" src="@/assets/pay/5.png" alt="">
            <img v-if="active == 2" class="zf-type-icon" src="@/assets/pay/6.png" alt="">
            <span>{{calcType(active)}}扫码</span>
          </p>
        </div>
      </div>
      
    </el-dialog>
    
  </div>
</template>

<script>
import $http from "@/api/recharge/recharge"
import $login from "@/api/login/login"
import $ from "jquery"
import VueQr from 'vue-qr'
export default {
  data() {
    return {
      active: 1,
      money: 0,
      customMoney: 0,
      centerDialogVisible: false,
      payImg: "",
      zfb: ''
    }
  },
  components: {
    VueQr
  },
  methods: {
    // 支付类型改变
    payMethodsChange(type) {
      this.active = type
    },
    // 支付类型转换
    calcType(type) {
      switch(type) {
        case 1: 
          return '支付宝付款'
          break;
        case 2:
          return '微信付款'
          break;
        case 3: 
          return '对公转账'
          break;
        case 4:
          return '销售收入支付';
          break;
        default: 
          return ''
      }
    },
    /**
     * 销售收入支付
     */
    orderEarnings() {
      
    },
    /**
     * 充值  money=0.01&userId=107&body=微信充值
     */
    wxPay(money) {
      if(money !== 0) {
        this.money = money;
      } else {
        this.money = this.customMoney;
      }
      let data = {};
      let url = "";
      switch(this.active) {
        case 1:
          data = {
            total: this.money,
            subject: '支付宝充值',
            userId: sessionStorage.getItem('userId')
          };
          $http.aliPayCode(data).then(res => {
            console.log(res);
            this.zfb = res;
            this.centerDialogVisible = true;

          })
          break;
        case 2: //微信支付
          data = {
            money: this.money,
            userId: sessionStorage.getItem("userId"),
            body: this.calcType(this.active)
          };
          url = this.$url.baseUrl + "/wxPay/pay?money="+data.money+"&userId="+data.userId+"&body="+ data.body;
          this.$http.get(url, { responseType: 'arraybuffer' }).then((res) => {
            console.log(res);
            this.payImg = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`;
            this.centerDialogVisible = true;
          });
          break;
        case 4: //销售收入支付
          data = {
            total: this.money,
            userId: sessionStorage.getItem("userId"),
          };
          $http.orderEarnings(data).then(res => {
            console.log(res);
            this.$message(res.msg);
          })
          break;  

      }

      


      // $http.wxPay(data).then(res => {
      //   console.log(res);
      //   this.payImg = res;
      //   this.centerDialogVisible = true;
      // })
    },
    goBack() {
      this.$router.go(-1)
    },
    change() {
      this.$router.push({
        name: "VatRecord",
      });
    },
    jumpToList() {
      this.$router.push('/account/orderInvoice')
    },
    dialogClose() {
      let data = {
        phone: sessionStorage.getItem('userId')
      };
      $login.getUserInfo(data).then((res) => {
        this.$router.go(0);
      });
    }
  },
}
</script>

<style scoped>
.money-text span {
  font-size: 20px;
  color: #ff5e00;
}
.zf-wrapper .zf-type-icon {
  width: 30px;
  margin-right: 7px;
}
.zf-type span {
  vertical-align: top;
  display: inline-block;
  margin-top: 2px;
}
.zf-wrapper img {
  width: 260px;
}
.zf-text {
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  margin-left: 60px;
}
.money-text {
  border-top: 2px dashed #a19f9f;
  border-bottom: 2px dashed #a19f9f;
  padding: 20px 30px 20px 10px;
  margin-bottom: 45px;
  margin-top: 52px;
  
}
.zf-tit {
  font-size: 22px;
  font-weight: 500;
  padding-bottom: 20px;
  margin-bottom: 30px;
  color: #7e7f81;
  letter-spacing: 2px;
  border-bottom: 2px solid #ddd;
}
.pay-wrapper >>> .el-dialog__body {
  text-align: center;
}
.dgzz li {
  margin-bottom: 12px;
}
.pay{
  margin-top: 30px;
  padding-left: 20px;
  cursor: pointer;
}
.money-content >>> .el-input-group>.el-input__inner{
  height: 45px;
}
.money-content >>> .el-input-group__append{
  background: var(--green);
  color: #FFF;
}
.money{
  display: flex;
  flex-wrap: wrap;
  max-width: 850px;
  margin-top: -50px;
}
.money-content{
  padding: 0 30px;
  margin-top: 50px;
}
.money-content p{
  margin-top: 10px;
  width: 100%;
  text-align: center;
  font-size: var(--content);
}
.price-item{
  width: 220px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: var(--green);
  border-radius: 3px;
  border: 1px solid transparent;
  color: var(--chilid-nav-bg);
  font-size: var(--content);
  cursor: pointer;
}
.pay-content{
  display: flex;
  justify-content: flex-start;
}
.pay-method{
  background: #f6f9fc;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 40px;
}
.pay-content{
  background: #FFF;
  padding: 40px;
  border: 1px solid #d9dcde;

}
.pay-content label{
  width: 170px;
  height: 45px;
  line-height: 45px;
}
.pay-method label{
  width: 170px;
}
.pay-method .method-item{
  margin: 40px 0;
  margin-right: 50px;
}
.method-item{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  /* overflow: hidden; */
  cursor: pointer;
  position: relative;
}
.active1::after, .active2::after, .active3::after, .active4::after{
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 181%;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border: 1px solid #d9dcde;
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg);
  border-bottom: none;
  border-right: none;
  z-index: 1;
}
.type1{
  background-image: url(../../assets/pay/1.png);
}
.type1:hover{
  background-image: url(../../assets/pay/5.png);
}
.active1{
  background-image: url(../../assets/pay/5.png);
}
.type2{
  background-image: url(../../assets/pay/2.png);
}
.type2:hover{
  background-image: url(../../assets/pay/6.png);
}
.active2{
  background-image: url(../../assets/pay/6.png);
}
.type3{
  background-image: url(../../assets/pay/3.png);
}
.type3:hover{
  background-image: url(../../assets/pay/7.png);
} 
.active3{
  background-image: url(../../assets/pay/7.png);
}
.type4{
  background-image: url(../../assets/pay/4.png);
}
.type4:hover{
  background-image: url(../../assets/pay/8.png);
}
.active4{
  background-image: url(../../assets/pay/8.png);
}
.top-msg{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
}
.upload-top {
  color: var(--color-black);
  padding-bottom: 35px;
  padding-left: 20px;
  margin-top: 20px;
}
.msg-left span{
  font-size: var(--title-small);
  margin-right: 40px;
}
.msg-right{
  font-size: var(--content);
  color: var(--green);
  cursor: pointer;
}
</style>